<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/layui.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/kw-index.css" />
    <link rel="stylesheet" type="text/css" href="css/animate-kw.css">
    <title>kw</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="http://at.alicdn.com/t/font_654675_r43ukbmhxqb2zkt9.js"></script>
    <script>
        (function(a) {  
            a.fn.hoverDelay = function(c, f, g, b) {  
                var g = g || 350,   //hover entry time  
                b = b || 200,       //hover departure time  
                f = f || c;  
                var e = [],  
                d = [];  
                return this.each(function(h) {  
                    a(this).mouseenter(function() {  
                        var i = this;  
                        clearTimeout(d[h]);  
                        e[h] = setTimeout(function() {  
                            c.apply(i)  
                        },  
                        g)  
                    }).mouseleave(function() {  
                        var i = this;  
                        clearTimeout(e[h]);  
                        d[h] = setTimeout(function() {  
                            f.apply(i)  
                        },  
                        b)  
                    })  
                })  
            }  
        })(jQuery);  
    </script>
</head>
<body>
    <div class="header">
        <div class="header-main">
            <div class="header-main-left">
                <p>kingwear china</p>
                <p>find us on facebook</p>
            </div>
            <div class="header-main-right">
                <p>sign in</p>
                <p>sign up</p>
            </div>
        </div>
    </div>
    <div class="banner-nav">
        <div class="nav-menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="nav-menu-mobile"></div>
        <div class="nav-menu-mobile-logo">
            <img class="logo-imga" src="img/logo-a.png">
        </div>
        <div class="banner-inner">
            <div class="logo">
                <img class="logo-imga" src="img/logo-a.png">
                <img class="logo-imgb" src="img/logo-b.png">
            </div>
            <div class="nav" id="main-nav">
                <ul class="nav-sec">
                    <li>
                        <h4>Smartwatch</h4>
                        <div class="nav-add"> 
                            <ul>
                                <li>
                                    <div class="nav-pro-img">
                                        <img src="img/kw-imgp_03.png" alt="">
                                    </div>
                                    <h5>eSIM smart watch</h5>
                                </li>
                                <li>
                                    <div class="nav-pro-img">
                                        <img src="img/kw-imgp_68.png" alt="">
                                    </div>
                                    <h5>4G Smartwatch</h5>
                                </li>
                                <li>
                                    <div class="nav-pro-img">
                                        <img src="img/kw-imgp_05.png" alt="">
                                    </div>
                                    <h5>3G smart watch</h5>
                                </li>
                                <li>
                                    <div class="nav-pro-img">
                                        <img src="img/kw-imgp_07.png" alt="">
                                    </div>
                                    <h5>Fitness smartwatch</h5>
                                </li>
                                <li>
                                    <div class="nav-pro-img">
                                        <img src="img/kw-imgp_09.png" alt="">
                                    </div>
                                    <h5>4G Smartwatch for Kids</h5>
                                </li>
                                <li>
                                    <div class="nav-pro-img">
                                        <img src="img/kw-imgp_11.png" alt="">
                                    </div>
                                    <h5>2G smart watch</h5>
                                </li>
                                <!-- <li>
                                    <div class="nav-pro-img">
                                        <img src="img/kw-imgp_13.png" alt="">
                                    </div>
                                    <h5>Smartwatch for the Elderly</h5>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li>
                        <h4>Smartband</h4>
                        <div class="nav-add">
                                <ul>
                                    <li>
                                        <div class="nav-pro-img">
                                            <img src="img/kw-imgp_16.png" alt="">
                                        </div>
                                        <h5>KR01</h5>
                                    </li>
                                    <li>
                                        <div class="nav-pro-img">
                                            <img src="img/kw-imgp_17.png" alt="">
                                        </div>
                                        <h5>KR02</h5>
                                    </li>
                                    <li>
                                        <div class="nav-pro-img">
                                            <img src="img/kw-imgp_18.png" alt="">
                                        </div>
                                        <h5>KR03</h5>
                                    </li>
                                    <li>
                                        <div class="nav-pro-img">
                                            <img src="img/kw-imgp_19.png" alt="">
                                        </div>
                                        <h5>KR04</h5>
                                    </li>
                                    <li>
                                        <div class="nav-pro-img">
                                            <img src="img/kw-imgp_20.png" alt="">
                                        </div>
                                        <h5>KR05</h5>
                                    </li>
                                </ul>
                        </div>
                    </li>
                    
                </ul>
                <ul>
                    <li class="nav-com">
                        <h4>About us</h4>
                        <div class="nav-com-box">
                            <a href="#">Company Profile</a>
                            <a href="solution.html">Solution</a>
                        </div>
                    </li>
                    <li class="nav-com">
                        <h4 >Community
                            <div class="nav-com-box">
                                <a href="news-a01.html">news</a>
                                <a href="blog-a01.html">blog</a>
                            </div>
                        </h4>
                    </li>
                    <li>
                        <h4><a href="support.html">Support</a></h4>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="swiper-container" id="swiper-banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-container">
                        <img class="banner-bg-a01" src="img/kwimg10.jpg" alt="">
                        <img class="banner-pro-a01 ani"  swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="img/kwimg11.png" alt="">
                        <div class="descrip descrip01">
                            <div>
                                <h3 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">KW26</h3>
                                <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">Multifunctional Fitness Smartwatch</p>
                                <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.0s">Stay connected no matter where you’re</p>
                                <button class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.4s">learn more</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-container">
                        <img class="banner-bg-a01" src="img/kwimg10.jpg" alt="">
                        <img class="banner-pro-a01 ani"  swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="img/kwimg11.png" alt="">
                        <div class="descrip descrip01">
                            <div>
                                <h3 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">KW26</h3>
                                <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">Multifunctional Fitness Smartwatch</p>
                                <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.0s">Stay connected no matter where you’re</p>
                                <button class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.4s">learn more</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-container">
                        <img class="banner-bg-a01" src="img/kwimg10.jpg" alt="">
                        <img class="banner-pro-a01 ani"  swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s" src="img/kwimg11.png" alt="">
                        <div class="descrip descrip01">
                            <div>
                                <h3 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s">KW26</h3>
                                <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.6s">Multifunctional Fitness Smartwatch</p>
                                <p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.0s">Stay connected no matter where you’re</p>
                                <button class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2.4s">learn more</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="swiper-button-prev swiper-button-mine swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-mine swiper-button-white"></div> -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="products">
        <h2><span>s</span>tar <span>p</span>roducts</h2>
        <div class="products-main"> 
            <div class="products-main-left">
                <div class="pro-parta img-center hover-zt" onclick="window.location.href='kw-68.html'">
                    <h3>High-end KW68 3G<br>Smartwatch</h3>
                    <img src="img/kwimg01.png" alt="">
                </div>
            </div>
            <div class="products-main-right">
                <div class="pro-second">
                    <div class="pro-partb img-center hover-zt" onclick="window.location.href='kw-98-99.html'">
                        <h3>Fitness smartwatch</h3>
                        <img src="img/kwimg02.png" alt="">
                    </div>
                </div>
                <div class="pro-third">
                    <div class="pro-partc img-center hover-zt">
                        <h3>Best-selling 3G Smartwatch</h3>
                        <img src="img/kwimg03.jpg" alt="">
                    </div>
                </div>
                <div class="pro-forth">
                    <div class="pro-partd img-center hover-zt">
                        <h3>Smartband</h3>
                        <img src="img/kwimg04.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="community">
        <h2><span>C</span>ommunity</h2>
        <div class="community-main">
            <div class="community-news">
                <div class="community-main-img">
                    <a href="news-a02.html"><img src="img/kwimg05.jpg" alt=""></a>
                </div>
                <div class="community-main-describe flex-box">
                    <div>
                        <h4>The News Title</h4>
                        <p>Founded in 2012, Kingwear aims to become a creative and innovative group focusing on knowing our customers’ needs and leading the fashion trend for smart watches.</p>
                    </div>
                </div>
            </div>
            <div class="community-blog">
                <div class="community-main-img">
                    <a href="blog-a02.html"><img src="img/kwimg06.jpg" alt=""></a>
                </div>
                <div class="community-main-describe flex-box">
                    <div>
                        <h4>The Blog Title</h4>
                        <p>Founded in 2012, Kingwear aims to become a creative and innovative group focusing on knowing our customers’ needs and leading the fashion trend for smart watches. .</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="about">
        <div class="about-main">
            <div class="about-img" onclick="window.location.href='about-us.html'" style="cursor: pointer;">
                <img src="img/kwimg07.jpg" alt="">
                <div class="vido_play"></div>
            </div>
            <div class="about-text">
                <div class="about-text-main">
                    <h3><span>W</span>ho <span>W</span>e <span>A</span>re</h3>
                    <p>Founded in 2012, Kingwear aims to become a creative and innovative group focusing on knowing our customers’ needs and leading the fashion trend for smart watches. After years’ hard work and continuous innovations, KingWear has became one of the leading competitors in the smart wearable industry.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="foot-main">
            <div class="layui-row">
                <div class="layui-col-md2">
                  <ul>
                      <li><h5>About us</h5></li>
                      <li><a>Company Profile</a></li>
                      <li><a>Solution</a></li>
                      <li><a>Company News</a></li>
                      <li><a>Blog</a></li>
                      <li><a>Privacy Policy</a></li>
                  </ul>
                </div>
                <div class="layui-col-md2">
                    <ul>
                        <li><h5>support</h5></li>
                        <li><a>Contact Us</a></li>
                        <li><a>Download</a></li>
                        <li><a>Where to Buy</a></li>
                        <li><a>FAQ</a></li>
                    </ul>
                </div>
                <div class="layui-col-md4">
                    <ul>
                        <li><h5>Distribution & Partnership</h5></li>
                        <li><a>zhuangwx@king-world.cn</a></li>
                    </ul>
                    <ul>
                        <li><h5>Customer Service</h5></li>
                        <li><a>service@king-world.cn</a></li>
                    </ul>                    
                    <ul>
                        <li></li>
                        <li><a>Copyright Ⓒ 2018 Shenzhen Kingwear Intelligent Techology Co.Ltd,. All rights reserved.</a></li>
                    </ul>                    
                </div>
                <div class="layui-col-md4">
                    <ul>
                        <li><h5>LET’S STAY IN TOUCH</h5></li>
                        <li class="foot-email"><input type="text" placeholder="Enter Email Adress">
                            <button><img src="img/kwimg20.png" alt=""></button>
                        </li>
                    </ul>
                    <ol>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#iconkw-facebook"></use>
                            </svg>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#iconkw-youtube"></use>
                            </svg>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#iconkw-twitter"></use>
                            </svg>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#iconkw-google-plus"></use>
                            </svg>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#iconkw-socialinstagram"></use>
                            </svg>
                        </li>
                    </ol>
                </div>
              </div>
        </div>
    </div>
<script src="js/flexible.js"></script>
<script src="js/fastclick.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/city.data-3.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<script src="js/layui.js"></script>
<script>
    var swiperBanner = new Swiper('.swiper-container', {
        // mousewheel: true, //鼠标的滚轮可以控制Swipers
        // slidesPerView :'auto', //设置slide以不同宽度高度滚动
        effect:'fade',
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        speed:1000,
        autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            },
        on:{
        init: function(){
          swiperAnimateCache(this); //隐藏动画元素 
          swiperAnimate(this); //初始化完成开始动画
        }, 
        slideChangeTransitionEnd: function(){ 
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
        }
      }
    });
    window.addEventListener("resize", function(){
        var windowWidth = $(window).width();
        if(windowWidth < 1200){
            $(".nav-add").css("display","block");
        }
        if(windowWidth >= 1200){
            $(".nav-add").css("display","none");
        }
    }); 
    var mainNavHtml = $("#main-nav").html();
    $(".nav-menu-mobile").html(mainNavHtml);

    $("#main-nav>ul:first").hoverDelay(function(){
        $(".banner-nav").css({"background":"rgba(255,255,255,1.0)","border-bottom":"1px solid #eee"});
        $(".logo-imga").css("opacity","1");
        $("#main-nav>ul>li>h4").css("color","#666");
        $("#main-nav>ul:first>li>h4").css("color","#333");
        $(".logo-imgb").css("opacity","0");
        var that = $(this);
        setTimeout(function(){
            that.find(".nav-add").css("height","300px");
            that.find(".nav-add").css("opacity","1");
        },0)
    },function(){
        $(".logo-imga").css("opacity","0");
        $(".logo-imgb").css("opacity","1");
        $("#main-nav>ul>li>h4").css("color","#fff");
        $(".banner-nav").css({"background":"rgba(255,255,255,0.0)","border-bottom":"none"});
        $(this).find(".nav-add").css("height","200px");
        $(this).find(".nav-add").css("opacity","0");
    })
    $(".nav-com").hover(function(){
        console.log(111)
        $(this).find(".nav-com-box").css("display","block");
        var that=$(this)
        setTimeout(function(){
            that.find(".nav-com-box").css({"opacity":"1","top":"68px"});
        },0)
    },function(){
        $(this).find(".nav-com-box").css({"opacity":"0","top":"48px"});
        var that=$(this)
        setTimeout(function(){
            that.find(".nav-com-box").css("display","none");
        },200)
    })
    $("#main-nav>ul:first>li").hover(function(){
        $(".nav-add").css("display","none");
        $(this).find(".nav-add").css("display","block");
    },function(){
         var that = $(this);
         setTimeout(function(){
            that.find(".nav-add").css("display","none");
        },350)
    })
    var sj = 0;
    $(".nav-menu").click(function(){
        if(sj === 0){
            $(".nav-menu-mobile").css({"height":"auto","padding":"12px","opacity":"1"});
            sj = 1;
        } else if(sj === 1) {
            $(".nav-menu-mobile").css({"height":"0","padding":"0","opacity":"0"});
            sj = 0;
        }
        
    })
    
</script>

</body>
</html>